<template>
    <div class="cate-page" id="cate-page" @click='closeCateModal'>
        <!-- background="#F7F9FA"  -->
        <search-sub :pageType="1" :isShowCart="false"></search-sub>
        <div class="tab-con">
            <div class="tab-wrap wrap line-v-center">
                <div class="tab-item flex" @click.stop="getCateTab">
                    <span :class="allBtnObj.act">{{
                        allBtnObj.cateName
                    }}</span>
                    <img src="../../assets/img/all.png" class="all-icon" v-if="!allBtnObj.showCateModal" />
                    <img src="../../assets/img/all-top.png" class="all-icon" v-else />
                </div>
                <div class="tab-item flex" @click.stop="setPriceSort">
                    <span>价格</span>
                    <div class="trigle-wrap">
                        <div class="trigle-up" :class="[
                                priceBtnObj.priceSort == 'price_asc'
                                    ? 'trigle-up-act'
                                    : '',
                            ]"></div>
                        <div class="trigle-down" :class="[
                                priceBtnObj.priceSort == 'price_desc'
                                    ? 'trigle-down-act'
                                    : '',
                            ]"></div>
                    </div>
                </div>
                <div class="tab-item flex" @click.stop="setTimeSort">
                    <span>时间</span>
                    <div class="trigle-wrap">
                        <div class="trigle-up" :class="[
                                timeBtnObj.timeSort == 'time_asc'
                                    ? 'trigle-up-act'
                                    : '',
                            ]"></div>
                        <div class="trigle-down" :class="[
                                timeBtnObj.timeSort == 'time_desc'
                                    ? 'trigle-down-act'
                                    : '',
                            ]"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="wrap" v-if="showPage">
            <div class="menu-list" v-if='goodsList.length > 0' v-loading="loadingPage">
                <div v-for="(item,index) in goodsList" :key="index" @click="toGoodsDetail(item.goods_id)">
                    <goods-item :item="item"></goods-item>
                </div>
            </div>
            <div class="no-data-con" v-else>
                <no-data></no-data>
            </div>
        </div>
        <pagination-footer :total="total" :page.sync="page" :limit.sync="limits" @pagination="getGoodsList" v-if="goodsList.length > 0">
        </pagination-footer>

        <!-- <view class="cate-wrap-modal" v-if='showModal' @click='closeCateModal'></view> -->
        <div class="cate-select-modal flex" :style="styleObject" :class="[this.allBtnObj.showCateModal ? 'box-shadow' : '']">
            <div class="first-cate-wrap">
                <el-scrollbar class="cate-scroll" :native="false">
                    <ul :style="{marginTop:-scrollTop+'px'}">
                        <li v-for="(item, index) in firstCateList" class="flex-center" :class="[firstCateId == item.category_id ? 'liact' : '']" :key="index"
                            :id="'first_cate_item'+item.category_id" :data-index='index' :data-id="item.category_id" @click.stop='switchFirstCate'>
                            {{ item.name }}
                        </li>
                    </ul>
                </el-scrollbar>
            </div>
            <div class="second-cate-wrap">
                <el-scrollbar class="cate-scroll-third" :native="false">
                    <ul class="flex">
                        <li v-for="(item, index) in secondCateList" :class="[secondCateIndex == index ? 'all-act' : '']" :key="index"
                            @click.stop="switchSecondCate(index,item.category_id)">
                            <p>{{ item.name }}</p>
                        </li>
                    </ul>
                </el-scrollbar>
                <div class="btn-wrap flex-center" v-if='thirdCateList.length == 0'>
                    <button class="sure-btn" @click="toConfirm">确定</button>
                </div>
            </div>
            <template>
                <div class="line"></div>
                <div class="second-cate-wrap third-cate-wrap">
                    <el-scrollbar class="cate-scroll-third" :native="false">
                        <ul class="flex">
                            <li v-for="(item, index) in thirdCateList" :class="[thirdCateIndex == index ? 'all-act' : '']" :key="index"
                                @click.stop="bindThirdCate(index,item.category_id)">
                                <p>{{ item.name }}</p>
                            </li>
                        </ul>
                    </el-scrollbar>
                    <div class="btn-wrap flex-center" v-if='thirdCateList.length > 0'>
                        <button class="sure-btn" @click="toConfirm">确定</button>
                    </div>
                </div>
            </template>

        </div>
    </div>
</template>

<script>
import SearchSub from "@/components/SearchSub.vue";
import GoodsItem from "@/components/GoodsItem.vue";
import PaginationFooter from '@/components/PaginationFooter.vue'
import {
    categoryList,
    goodList
} from '../../api/goods'
export default {
    components: {
        GoodsItem,
        SearchSub,
        PaginationFooter
    },
    data() {
        return {
            showPage: false,
            loadingPage: true,
            animation: "",
            //点击全部按钮操作
            allBtnObj: {
                showCateModal: false,
                cateName: "全部",
                cateId: '',
                act: "",
                animationDuration: "0.3s", // 动画持续时间
            },
            showModal: false,
            sortType: 'all',
            //点击价格按钮排序
            priceBtnObj: {
                isFlag: false,
                priceSort: "",
            },
            //点击时间按钮排序
            timeBtnObj: {
                isFlag: false,
                timeSort: "",
            },
            firstCateIndex: 0,
            firstCateId: '',
            firstCateList: [],
            secondCateIndex: '-1',
            scrollTop: 0,
            secondCateList: [],
            secondCateId: '',
            thirdCateIndex: '-1',
            thirdCateId: '',
            thirdCateList: [],
            goodsList: [],
            page: 1,
            limits: 10,
            total: 0,
        };
    },
    computed: {
        styleObject() {
            return {
                transition: `height ${this.allBtnObj.animationDuration} ease`,
                height: this.allBtnObj.showCateModal ? "380px" : "0px", // 根据条件设置高度
            };
        },
    },
    created() {
        console.log("this.$route.params", this.$route.params);
        this.firstCateId = this.$route.params.id;
        this.allBtnObj.cateId = this.firstCateId;
        this.allBtnObj.cateName = this.$route.params.id == 0 ? '全部':this.$route.params.name;
        this.allBtnObj.act = 'all-act';
        console.log('firstCateId', this.firstCateId)
        this.getFirstCate();
    },
    methods: {
        getFirstCate(type = 0) {
            const that = this;
            categoryList({
                parent_id: 0,
            }).then(res => {
                if (res.code == 0) {
                    that.firstCateList = res.data;
                    if (res.data.length > 0) {
                        that.getSecondCate();
                        if (type == 0) {
                            that.getGoodsList();
                        }
                    }
                }
            })
        },
        getSecondCate(type = 0) { //0 -- 从分类点击进来  1 -- 点击切换一级分类时
            const that = this;
            categoryList({
                parent_id: that.firstCateId,
            }).then(res => {
                if (res.code == 0) {
                    that.secondCateList = res.data;
                    if (res.data.length > 0) {
                        // if (type == 0) that.getThirdCate();
                        // if (type == 0) {
                        //     that.secondCateId = res.data[0].category_id;
                        //     that.getThirdCate()
                        // }
                        // that.secondCateId = res.data[0].category_id;
                        // that.getThirdCate()
                    }
                }
            })
        },
        getThirdCate(type = 0) { //0 -- 从分类点击进来  1 -- 点击切换一级分类时
            console.log('type', type)
            const that = this;
            categoryList({
                parent_id: that.secondCateId,
            }).then(res => {
                if (res.code == 0) {
                    that.thirdCateList = res.data;
                    if (res.data.length > 0) {
                        // if (type == 0) that.getGoodsList();
                    }
                }
            })
        },
        switchFirstCate(e) {
            console.log('e', e)
            let that = this,
                {
                    offsetTop,
                    offsetHeight
                } = e.target,
                {
                    id,
                    index
                } = e.target.dataset,
                firstCateList = that.firstCateList,
                scrollTop = 0,
                cateScrollViewHeight = 380;
            if (that.firstCateId == id) {
                return;
            }
            that.firstCateId = id;
            that.firstCateIndex = index
            // if (offsetTop < cateScrollViewHeight / 2) {
            //     scrollTop = 0;
            // } else {
            //     scrollTop = offsetTop - cateScrollViewHeight / 2 + offsetHeight / 2;
            // }
            console.log('scrollTop', scrollTop)
            that.secondCateList = [];
            that.thirdCateList = [];
            that.secondCateId = '';
            that.secondCateIndex = '-1'
            that.thirdCateId = '';
            that.thirdCateIndex = '-1'
            that.getSecondCate(1);
        },
        switchSecondCate(index, id) {
            let that = this,
                secondCateList = that.secondCateList;
            if (that.secondCateIndex === index) {
                return;
            }
            that.secondCateIndex = index;
            that.secondCateId = id;
            that.thirdCateList = [];
            that.thirdCateId = '';
            that.thirdCateIndex = '-1'
            that.getThirdCate();
        },
        bindThirdCate(index, id) {
            let thirdCateList = this.thirdCateList;
            this.thirdCateId = id;
            this.thirdCateIndex = index;
        },
        getGoodsList() {
            const that = this;
            goodList({
                sortType: that.sortType,
                categoryId: that.allBtnObj.cateId,
                page: that.page,
                limits: that.limits
            }).then(res => {
                that.showPage = true;
                that.loadingPage = false;
                if (res.code == 0) {
                    that.goodsList = res.data.data;
                    that.total = res.data.total;
                    // that.goodsList = that.goodsList.concat(res.data.data);
                    // that.totalPage = res.data.last_page;
                    // if (that.totalPage == that.page) {
                    //     that.loadEnd = true;
                    // }
                }
            })
        },
        //点击全部按钮
        getCateTab() {
            if (this.allBtnObj.showCateModal) {
                this.allBtnObj.showCateModal = false;
                this.showModal = false;
                if (this.allBtnObj.cateName != "全部") {
                    this.allBtnObj.act = "all-act";
                } else {
                    this.allBtnObj.act = "";
                }
            } else {
                this.allBtnObj.showCateModal = true;
                this.allBtnObj.act = "all-act";
                this.showModal = true;
            }
        },
        setPriceSort() {
            let priceSort = this.priceBtnObj.priceSort,
                isFlag = this.priceBtnObj.isFlag;
            isFlag = !isFlag;
            if (isFlag) {
                priceSort = 'price_asc'
            } else {
                priceSort = 'price_desc'
            }
            this.priceBtnObj.isFlag = isFlag;
            this.priceBtnObj.priceSort = priceSort;
            this.sortType = priceSort;
            this.timeBtnObj.isFlag = false;
            this.timeBtnObj.timeSort = "";
            // this.goodsList = [];
            // this.page = 1;
            this.getGoodsList()
        },
        setTimeSort() {
            let timeSort = this.timeBtnObj.timeSort,
                isFlag = this.timeBtnObj.isFlag;
            isFlag = !isFlag;
            if (isFlag) {
                timeSort = 'time_asc'
            } else {
                timeSort = 'time_desc'
            }
            this.timeBtnObj.isFlag = isFlag;
            this.timeBtnObj.timeSort = timeSort;
            this.sortType = timeSort;
            this.priceBtnObj.isFlag = false;
            this.priceBtnObj.priceSort = "";
            this.getGoodsList()
        },
        toConfirm() {
            let thirdCateList = this.thirdCateList,
                thirdCateIndex = this.thirdCateIndex,
                firstCateIndex = this.firstCateIndex,
                firstCateList = this.firstCateList,
                secondCateIndex = this.secondCateIndex,
                secondCateList = this.secondCateList;
                console.log('thirdCateIndex',this.thirdCateIndex);
            if (this.firstCateIndex != '-1' && this.secondCateIndex == '-1' && this.thirdCateIndex == '-1') {
                console.log('只点击了一级分类')
                this.allBtnObj.cateId = this.firstCateId;
                this.allBtnObj.cateName = firstCateList[firstCateIndex].name;
            }
            if(this.firstCateIndex != '-1' && this.secondCateIndex != '-1' && this.thirdCateIndex == '-1'){
                console.log('点击了二级分类')
                this.allBtnObj.cateId = this.secondCateId;
                this.allBtnObj.cateName = secondCateList[secondCateIndex].name;
            }
            if (this.thirdCateIndex != '-1') {
                console.log('三级分类')
                this.allBtnObj.cateId = this.thirdCateId;
                this.allBtnObj.cateName = thirdCateList[thirdCateIndex].name;
            }

            this.closeCateModal();
            this.loadingPage = true;
            this.goodsList = [];
            this.page = 1;
            this.getGoodsList()
        },
        closeCateModal() {
            this.showModal = false;
            this.allBtnObj.showCateModal = false;
        },
        toGoodsDetail(id) {
            const href = this.$router.resolve({
                path: `/goods_detail`,
                query: { goods_id: id },
            }).href;
            window.open(href, "_blank");
        },
    },
};
</script>
<style>
.el-scrollbar__wrap {
    overflow-x: hidden;
}
</style>
<style lang="scss" scoped>
::v-deep .el-loading-mask {
    width: 100%;
    height: calc(100vh - 309px);
}
.cate-page {
    min-height: 100%;
    background: #fff;
}
$sub-color: #1eb368;

.tab-con {
    width: 100%;
    height: 50px;
    background: #f7f9fa;
}

.tab-wrap {
    height: 50px;
    background: #f7f9fa;
    padding: 0 50px;
    box-sizing: border-box;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    margin: auto;

    .tab-item {
        // height: 100%;
        font-size: 14px;
        align-items: center;
        cursor: pointer;
        &:hover {
            color: var(--main-color);
        }
    }

    .all-icon {
        width: 20px;
        height: 20px;
        margin-left: 2px;
        margin-top: 2px;
    }

    .all-act {
        color: $sub-color;
    }

    .trigle-wrap {
        margin-top: 1px;
        margin-left: 4px;

        .trigle-up {
            width: 0;
            height: 0;
            border-top: 4px solid transparent;
            border-right: 3px solid transparent;
            border-left: 3px solid transparent;
            border-bottom: 4px solid #cccccc;
        }

        .trigle-up-act {
            border-top: 4px solid transparent;
            border-right: 3px solid transparent;
            border-left: 3px solid transparent;
            border-bottom: 4px solid $sub-color;
        }

        .trigle-down {
            width: 0;
            height: 0;
            border-top: 4px solid #cccccc;
            border-right: 3px solid transparent;
            border-left: 3px solid transparent;
            border-bottom: 4px solid transparent;
            margin-top: 2px;
        }

        .trigle-down-act {
            border-top: 4px solid $sub-color;
            border-right: 3px solid transparent;
            border-left: 3px solid transparent;
            border-bottom: 4px solid transparent;
        }
    }
}
.wrap {
}
.menu-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 120px;
}
.box-shadow {
    box-shadow: 0px 5px 3px 1px rgba(0, 0, 0, 0.16);
}
.cate-select-modal {
    width: 1180px;
    height: 380px;
    background: #ffffff;
    // box-shadow: 0px 5px 3px 1px rgba(0, 0, 0, 0.16);
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 205px;
    z-index: 23;
    overflow: hidden;

    .cate-scroll {
        height: 100%;
    }
    .cate-scroll-third {
        height: 320px;
    }
    .btn-wrap {
        width: 100%;
        height: 60px;
        .sure-btn {
            width: 72px;
            height: 36px;
            background: var(--main-color);
            border-radius: 18px;
            color: #fff;
            font-size: 14px;
        }
    }
    .first-cate-wrap {
        width: 116px;
        height: 100%;
        background: #f0f0f0;

        ul {
            li {
                width: 116px;
                height: 66px;
                font-weight: bold;
                font-size: 14px;
                cursor: pointer;
            }

            .liact {
                background: #fff;
                color: $sub-color;
            }
        }
    }

    .second-cate-wrap {
        width: 521px;
        // flex: 1;
        height: 100%;
        background: #ffffff;
        transition: width linear 0.1s;
        ul {
            // background: red;
            // padding:0 48px;
            flex-wrap: wrap;
            font-size: 14px;

            li {
                width: 25%;
                padding: 0 20px;
                box-sizing: border-box;
                margin-top: 30px;
                cursor: pointer;
            }
        }
    }

    .line {
        width: 22px;
        height: 100%;
        background: linear-gradient(
            90deg,
            #e1e1e1 0%,
            rgba(255, 255, 255, 0.05) 100%
        );
    }

    .third-cate-wrap {
        // flex: 1;
        width: 521px;
        transition: width linear 0.1s;
    }

    .all-act {
        color: $sub-color;
    }
}
@media screen and (max-width: 1280px) {
    .cate-select-modal {
        width: 924px;
        height: 380px;
        background: #ffffff;
        // box-shadow: 0px 5px 3px 1px rgba(0, 0, 0, 0.16);
        position: fixed;
        left: 0;
        right: 0;
        margin: auto;
        top: 205px;
        z-index: 23;

        .cate-scroll {
            height: 100%;
        }

        .first-cate-wrap {
            width: 116px;
            height: 100%;
            background: #f0f0f0;

            ul {
                li {
                    width: 116px;
                    height: 66px;
                    font-weight: bold;
                    font-size: 14px;
                    cursor: pointer;
                }
                .liact {
                    background: #fff;
                    color: $sub-color;
                }
            }
        }

        .second-cate-wrap {
            width: 398px;
            background: #ffffff;

            ul {
                // background: red;
                // padding:0 48px;
                flex-wrap: wrap;
                font-size: 14px;

                li {
                    width: 25%;
                    padding: 0 10px;
                    box-sizing: border-box;
                    margin-top: 30px;
                    cursor: pointer;
                    p {
                        width: 100%;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                }
            }
        }

        .line {
            width: 12px;
            height: 100%;
            background: linear-gradient(
                90deg,
                #e1e1e1 0%,
                rgba(255, 255, 255, 0.05) 100%
            );
        }

        .third-cate-wrap {
            width: 398px;
        }

        .all-act {
            color: $sub-color;
        }
    }
}
</style>